<template>
    <view class="mobile-mask" v-show="show">
        <button class="bind-mobile-btn" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">绑定手机</button>
    </view>
</template>

<script>
    import {mapActions} from "vuex";
    export default {
        name: "bind-mobile",
        props:{
            show:{
                type:Boolean,
                default:false
            },
            sessionKey:{
                type:String,
                default:""
            }
        },
        methods:{
            ...mapActions({
                getDewxbizdata:"user/getDewxbizdata",//解密获取手机号
                bindWechatPhoneNumber:"user/bindWechatPhoneNumber"//将手机号保存到数据库
            }),
            //获取手机号
            async getPhoneNumber(e){
                let encryptedData=e.detail.encryptedData;
                let iv=e.detail.iv;
                //解密获取手机号
                let pnRes=await this.getDewxbizdata({encrypteddata:encryptedData,iv:iv,session_key:this.sessionKey});
                if(pnRes.code==200){//获取手机号成功
                    let phoneNumber=pnRes.data.phoneNumber;
                    let bpRes=await this.bindWechatPhoneNumber({cellphone:phoneNumber});
                    if(bpRes.code==200){//保存手机号成功
                        this.$emit("close");
                        uni.navigateBack({ delta: 1 })
                    }else{
                        uni.showToast({
                            title:bpRes.data,
                            icon:"none",
                            duration:2000
                        })
                    }
                }else{//获取手机号失败
                    uni.showToast({
                        title:pnRes.data,
                        icon:"none",
                        duration:2000
                    })
                }
            }
        }
    }
</script>

<style scoped>
    .mobile-mask{width:100%;height:100%;position: fixed;z-index:99;left:0;top:0;background-color:rgba(0,0,0,0.8)}
    .bind-mobile-btn{width:70%;height:80rpx;position: absolute;left:50%;top:50%;transform: translate(-50%,-50%);background-color:#28A622;text-align: center;line-height:80rpx;font-size:32rpx;color:#FFFFFF;border-radius: 5px;}
</style>
